<template>
  <el-card shadow="never" class="portal-todoList-box box">
    <div class="arrows" @click="goMoreList()" style="cursor: pointer">
      <p>
        <i class="el-icon-right"></i>
        更多
      </p>
    </div>
    <div slot="header" class="portal-common-title">
      <span>{{ title }}</span>
      <i>{{ " " + "(" + this.list.length + ")" }}</i>
    </div>
    <div class="portal-todoList-box-body">
      <template v-if="list.length">
        <a
          class="item com-hover"
          @click="goDetail(item)"
          v-for="(item, i) in list"
          :key="i"
        >
          <span class="name" v-if="item.fullName">{{ item.fullName }}</span>
          <span class="name" v-else>{{ item.customerName }}</span>
          <span class="time">{{
            item.creatorTime | toDate("yyyy-MM-dd")
          }}</span>
        </a>
        <!-- <p class="noData-txt">{{ "api" + api }}</p> -->
      </template>
      <div class="portal-common-noData" v-else>
        <img
          src="@/assets/images/portal-nodata.png"
          alt=""
          class="noData-img"
        />
        <p class="noData-txt">{{ text.desc }}</p>
        <!-- <p class="noData-txt">{{ "api" + api }}</p>
        <p class="noData-txt">{{ "propsApi" + propsApi }}</p>
        <p class="noData-txt">{{ "value" + selectValue }}</p> -->
      </div>
    </div>
  </el-card>
</template>
<script>
import request from "@/utils/request";
export default {
  props: {
    title: { type: String, default: "" },
    api: { type: String, default: "" },
    propsApi: { type: String, default: "" },
    selectValue: { type: String, default: "" },
  },
  data() {
    return {
      list: [],
      setApi: "",
      text: {
        desc: "暂无数据",
        routesLink: "",
      },
    };
  },
  watch: {
    selectValue() {
      switch (this.selectValue) {
        case "notice":
          // this.api = "/api/notice";
          this.$emit("setApivalue", "/api/visualdev/Dashboard/Notice");
          this.setApi = "/api/visualdev/Dashboard/Notice";
          this.getData();
          this.text = {
            desc: "暂无公告",
            routesLink: "",
          };
          // console.log("公告");
          break; //停止执行，跳出switch
        case "unread":
          this.$emit("setApivalue", "/api/visualdev/Dashboard/Email");
          this.setApi = "/api/visualdev/Dashboard/Email";
          // console.log("未读消息");
          this.text = {
            desc: "暂无邮箱",
            routesLink: "",
          };
          this.getData();
          break; //停止执行，跳出switch
        case "todo":
          this.$emit("setApivalue", "/api/visualdev/Dashboard/FlowTodo");
          this.setApi = "/api/visualdev/Dashboard/FlowTodo";
          this.text = {
            desc: "暂无待办事项",
            routesLink: "",
          };
          this.getData();
          break; //停止执行，跳出switch
        default: //上述条件都不满足时，默认执行的代码
        // console.log("空");
      }
    },
    api() {
      this.$nextTick(() => {
        this.setApi = this.api;
      });
      this.getData();
    },
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$nextTick(() => {
        this.setApi = this.api;
        // console.log(this.api);
        if (this.setApi === "") {
          this.setApi = "/api/visualdev/Dashboard/Notice";
        }
        if (this.setApi.indexOf("getList") != -1) {
          request({
            url: `${this.setApi}`,
            method: "post",
            data: {
              switchType: "examine",
            },
          }).then((res) => {
            // console.log(res);
            if (res.data.list) {
              this.list = res.data.list;
            }
          });
        } else {
          request({
            url: `${this.setApi}`,
            method: "get",
          })
            .then((res) => {
              // console.log(res);
              if (res.data.list) {
                this.list = res.data.list;
              }
            })
            .catch(() => {
              // console.log("错误");
            });
        }
      });
    },
    goDetail(item) {
      // console.log(item);
      if (this.setApi == "/api/visualdev/Dashboard/FlowTodo") {
        // 待办事项
        let config = JSON.stringify(item);
        const Base64 = require("js-base64").Base64;
        this.$router.push(
          "/workFlowDetail?config=" + encodeURIComponent(Base64.encode(config))
        );
      }
    },
    // 更多跳转列表
    goMoreList() {
      if (this.setApi == "/api/visualdev/Dashboard/FlowTodo") {
        // 待办事项
        // 跳转到客户审核
        this.$router.push({
          path: "/workFlow/flowTodo",
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.box {
  max-height: 330px;
  position: relative;
  .arrows {
    box-sizing: border-box;
    // width: 98%;
    height: 25px;
    line-height: 25px;
    background-color: #fff;
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 14px;
    color: rgb(24, 144, 255);
    text-align: right;
  }
  .portal-todoList-box-body {
    overflow: auto;
    max-height: 285px;
    min-height: 285px;
    background-color: white;
  }
}
</style>
